<template>
  <div class="content">
    <div class="form sign-in">
      <h2>欢迎回来</h2>
      <label>
        <span>用户名</span>
        <el-input placeholder="请输入内容" v-model="user.cname" clearable />
      </label>
      <label>
        <span>密码</span>
        <el-input placeholder="请输入密码" v-model="user.cpass" show-password />
      </label>
      <p class="forgot-pass"><a href="javascript:">忘记密码？</a></p>

      <span><el-button type="text" @click="login" class="submit">登 录</el-button></span>
      <el-button type="text" class="submit"  @click="dialogVisible = true">注 册</el-button>
<!--      <button type="button" class="fb-btn">使用 <span>facebook</span> 帐号登录</button>-->
    </div>
    <div class="sub-cont">
      <div class="img">
        <div class="img__text m--up">
          <h2>还未注册？</h2>
          <p>立即注册，发现大量美食！</p>
        </div>

        <div class="img__btn">
          <span  class="m--up">注 册</span>
          <span> </span>
        </div>
      </div>

      <el-dialog
        title="注册页面"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
        top="10px">

        <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="70px" class="demo-ruleForm">

          <label>
            <el-form-item label="用户名" prop="cname">
              <el-input type="text" v-model="ruleForm2.cname" auto-complete="off"></el-input>
            </el-form-item>
          </label>
          <label>
            <el-form-item label="邮箱" prop="email">
              <el-input type="text" v-model="ruleForm2.email" auto-complete="off"></el-input>
            </el-form-item>
          </label>
          <label>
            <el-form-item label="密码" prop="cpass">
              <el-input type="password" v-model="ruleForm2.cpass" auto-complete="off"></el-input>
            </el-form-item>
          </label>
          <label>
            <el-form-item label="确认密码" prop="checkpassword">
              <el-input type="password" v-model="ruleForm2.checkpassword" auto-complete="off"></el-input>
            </el-form-item>
          </label>
          <label>
            <el-form-item label="验证码" prop="code">
              <el-input type="text" v-model="ruleForm2.code" auto-complete="off"></el-input>
            </el-form-item>
          </label>
          <button type="button" :plain="true" @click="getcode" class="submit">获取验证码</button>
          <button type="button" :plain="true" @click="registry('ruleForm2'),dialogVisible = false" class="submit">注 册</button>
          <button type="button" @click="resetForm('ruleForm2')" class="submit">重置</button>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  // import cookie from '/static/js/cookie.js'
  export default {
    data() {
      var validateEmail = (rule, value, callback) => {
        const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
        if (!value) {
          return callback(new Error('邮箱不能为空'));
        }
        if (!mailReg.test(value)) {
          return callback(new Error('请输入正确的邮箱格式'));
        }
        setTimeout(() => {
          // axios.post("/api/findByEmail?email="+this.ruleForm2.email).then(res=>{
          //   console.log(res.data.success)
          //   if (res.data=="0"){
          //     callback(new Error('邮箱已被注册！'));
          //   }else{
          //     callback();
          //   }
          // })
        }, 1000);
      };
      var validateloginName = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('登录名不能为空'));
        }
        setTimeout(() => {
          axios.post("",this.ruleForm2).then(res=>{
            if (!res.data.success){
              callback(new Error('用户名重复'));
            }else{
              callback();
            }
          })
        }, 1000);
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm2.checkpassword !== '') {
            this.$refs.ruleForm2.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm2.cpass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      var validatecode = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入验证码'));
        }
      };
      return {
        user:{
          cname:'',
          cpass:'',
        },
        ruleForm2: {
          email: '',
          cname: '',
          cpass: '',
          checkpassword:'',
          code:''
        },
        rules2: {
          email: [
            { validator: validateEmail, trigger: 'blur' }
          ],
          loginName:[
            { validator: validateloginName, trigger: 'blur' }
          ],
          password: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkpassword: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          codes: [
            { validator: validatecode, trigger: 'blur' }
          ],
        },
        dialogVisible: false,
      };
    },
    methods: {
      handleClose(done) {
        this.$confirm('确认取消注册么？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      getcode:function () {
        const h = this.$createElement;

        axios.get("/api/sendMail?email="+this.ruleForm2.email).then(res=>{
          console.log(res.data.success)
          if (res.data=="1") {
            this.$message({
              message: h('p', null, [
                h('span', null, '验证码 '),
                h('i', { style: 'color: teal' }, '发送成功！')
              ])
            });
          }else{
            this.$message({
              message: h('p', null, [
                h('span', null, '验证码 '),
                h('i', { style: 'color: teal' }, '发送失败！')
              ])
            });
          }

        })
      },
      registry(formName) {
        // this.$refs[formName].validate((valid) => {
        //   if (valid) {
            const h = this.$createElement;

            axios.post("/api/consumerRegistry",this.ruleForm2).then(res=>{
               console.log(res.data.success)
              if (res.data=='1') {
                this.$message({
                  message: h('p', null, [
                    h('span', null, '注册 '),
                    h('i', { style: 'color: teal' }, '成功！')
                  ])
                });
                this.diadialogVisible=true
              }else{
                this.$message({
                  message: h('p', null, [
                    h('span', null, '注册 '),
                    h('i', { style: 'color: teal' }, '失败！')
                  ])
                });
              }

            })
          // } else {
          //   console.log('信息填写有误！');
          //   return false;
          // }
        // });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      login:function () {
        axios.post("/api/consumerLogin",this.user).then(res=>{
          if (res.data==1){

            sessionStorage.setItem("username",this.user.cname + '')

            this.$router.push("/shopList");
            // alert(localStorage.getItem("username"))
          }else {
            this.$message.error(res.data.message);
          }
        })
      }
    }
  }
</script>

<style scoped>
  *, *:before, *:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  body {
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    background: #ededed;
  }

  input, button {
    border: none;
    outline: none;
    background: none;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  }

  .tip {
    font-size: 20px;
    margin: 40px auto 50px;
    text-align: center;
  }

  .content {
    overflow: hidden;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 900px;
    height: 550px;
    margin: -300px 0 0 -450px;
    background: #fff;
    background-image: url(/static/images/3.jpg);
  }

  .form {
    position: relative;
    width: 640px;
    height: 100%;
    transition: -webkit-transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
    padding: 50px 30px 0;
  }

  .sub-cont {
    overflow: hidden;
    position: absolute;
    left: 640px;
    top: 0;
    width: 900px;
    height: 100%;
    padding-left: 260px;
    background: #fff;
    transition: -webkit-transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
  }

  .content.s--signup .sub-cont {
    -webkit-transform: translate3d(-640px, 0, 0);
    transform: translate3d(-640px, 0, 0);
  }

  button {
    display: block;
    margin: 0 auto;
    width: 260px;
    height: 36px;
    border-radius: 30px;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
  }

  .img {
    overflow: hidden;
    z-index: 2;
    position: absolute;
    left: 0;
    top: 0;
    width: 260px;
    height: 100%;
    padding-top: 360px;
  }

  .img:before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 900px;
    height: 100%;
    background-image: url(/static/images/1.jpg);
    background-size: cover;
    transition: -webkit-transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
  }

  .img:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
  }

  .content.s--signup .img:before {
    -webkit-transform: translate3d(640px, 0, 0);
    transform: translate3d(640px, 0, 0);
  }

  .img__text {
    z-index: 2;
    position: absolute;
    left: 0;
    top: 50px;
    width: 100%;
    padding: 0 20px;
    text-align: center;
    color: #fff;
    transition: -webkit-transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
  }

  .img__text h2 {
    margin-bottom: 10px;
    font-weight: normal;
  }

  .img__text p {
    font-size: 14px;
    line-height: 1.5;
  }

  .content.s--signup .img__text.m--up {
    -webkit-transform: translateX(520px);
    transform: translateX(520px);
  }
  .img__text.m--in {
    -webkit-transform: translateX(-520px);
    transform: translateX(-520px);
  }

  .content.s--signup .img__text.m--in {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  .img__btn {
    overflow: hidden;
    z-index: 2;
    position: relative;
    width: 100px;
    height: 36px;
    margin: 0 auto;
    background: transparent;
    color: #fff;
    text-transform: uppercase;
    font-size: 15px;
    cursor: pointer;
  }
  .img__btn:after {
    content: '';
    z-index: 2;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 2px solid #fff;
    border-radius: 30px;
  }

  .img__btn span {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    transition: -webkit-transform 0.6s;
    transition: transform 0.6s;
    transition: transform 0.6s, -webkit-transform 0.6s;
  }

  .img__btn span.m--in {
    -webkit-transform: translateY(-72px);
    transform: translateY(-72px);
  }

  .content.s--signup .img__btn span.m--in {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  .content.s--signup .img__btn span.m--up {
    -webkit-transform: translateY(72px);
    transform: translateY(72px);
  }

  h2 {
    width: 100%;
    font-size: 26px;
    text-align: center;
  }

  label {
    display: block;
    width: 260px;
    margin: 25px auto 0;
    text-align: center;
  }

  label span {
    font-size: 20px;
    color: #F8F8FF;
    text-transform: uppercase;
  }

  input {
    display: block;
    width: 100%;
    margin-top: 5px;
    padding-bottom: 5px;
    font-size: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
    text-align: center;
  }

  .forgot-pass {
    margin-top: 15px;
    text-align: center;
    font-size: 20px;
    color: #F8F8FF;
  }

  .forgot-pass a {
    color: #F8F8FF;
  }

  .submit {
    margin-top: 40px;
    margin-bottom: 20px;
    background: #d4af7a;
    text-transform: uppercase;
  }

  .fb-btn {
    border: 2px solid #d3dae9;
    color: #8fa1c7;
  }
  .fb-btn span {
    font-weight: bold;
    color: #455a81;
  }

  .sign-in {
    transition-timing-function: ease-out;
    color: #F8F8FF;
  }
  .content.s--signup .sign-in {
    transition-timing-function: ease-in-out;
    transition-duration: 0.6s;
    -webkit-transform: translate3d(640px, 0, 0);
    transform: translate3d(640px, 0, 0);
  }

  .sign-up {
    -webkit-transform: translate3d(-900px, 0, 0);
    transform: translate3d(-900px, 0, 0);
  }
  .content.s--signup .sign-up {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
</style>
